<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title></title>
	<style type="text/css">
	    span{
	    	display: inline-block;
	    	width: 100px;
	    	height: 30px;
	    	background: skyblue;
	    	text-align: center;
	    	line-height: 30px;
	    }
		.show{
			display: block;
		}
		.select{
			background: #ccc;
		}
		#con1,#con2,#con3{
			display: none;
		}
	</style>
</head>
<body>
    <div>
    	<span id="span1">1</span>
    	<span id="span2">2</span>
    	<span id="span3">3</span>
    </div>
    <div id="con1">a</div>
    <div id="con2">b</div>
    <div id="con3">c</div>
</body>
<script type="text/javascript">
	var cons = document.getElementsByTagName('div');
	var spans = document.getElementsByTagName('span');
	for(var i=0;i<spans.length;i++) {
		spans[i].onclick = function() {
			for(var i=0;i<cons.length;i++) {
				if(this == spans[i]) {
					cons[i].className = 'show';
					spans[i].className = 'select';
				}else{
					cons[i].className = '';
					spans[i].className = '';
				}
			}
		}
	}
</script>
</html>